﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>FreeSilverlightChart Control Test Page </title>
    
    <script type="text/javascript" src="index.html.js"></script>
    <style type="text/css">
        .silverlightHost { width: 680px; height: 400px; }
        
        .controlBar 
        {
          width: 680px; 
          height: 116px; 
          margin-bottom:5px;
        }
        
        .controlBarLeftScroller 
        {
          background-image: url('./images/scrollLeft.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 12px;
          height: 116px;
          float: left;
        }

        .controlBarLeftScroller_dis
        {
          background-image: url('./images/scrollLeft_dis.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 12px;
          height: 116px;
          float: left;
        }
                
        .controlBarLeftScroller:hover
        {
          background-image: url('./images/scrollLeft_mo.png');
        }
        
        .controlBarRightScroller 
        {
          background-image: url('./images/scrollRight.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 12px;
          height: 116px;
          float: right;
        }

        .controlBarRightScroller_dis
        {
          background-image: url('./images/scrollRight_dis.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 12px;
          height: 116px;
          float: right;
        }
        
        .controlBarRightScroller:hover
        {
          background-image: url('./images/scrollRight_mo.png');
        }
        
        .controlBarItemContainer
        {
          width: 100%;
          height: 100%;
          background-image: url('./images/controlBarBackground.png');
          background-repeat: repeat-x;
          background-position: top left;
          position: relative;
          overflow:hidden;
        }
        
        .controlBarItemTableContainer
        {
          right: 0px;
          border-left: solid 2px #262D68;
          border-right: solid 2px #262D68;
          left: 65px;
          height: 100%;
          position: absolute;
          overflow:hidden;
        }
        
        .controlBarItemOptions
        {
          position: absolute;
          left: 0px;
          top: 36px;
          font-size: 10px;
          font-family: Arial;
          text-align: center;          
          vertical-align: middle;  
        }
        
        .controlBarItemOptionsLink
        {
          display: block;
          text-decoration: underline;
          text-align: center;
          cursor: pointer;
          color: #01121F;
          margin-top: 5px;
          margin-left: 2px;
          vertical-align: middle;  
        }
        
        .controlBarItemOptionsLink:hover
        {
          color: #BB1E56;
        }
        
        .controlBarItemCell
        {
          padding-left: 5px;
          padding-right: 5px;
          bottom: 0px;
          vertical-align: middle;
        }
        
        .controlBarItem
        {
          display: block;
          height: 100%;
          text-decoration: none;
        }
        
        .controlBarItemText
        {
          border: solid 1px #4EB7E3;
          background-image: url('./images/textBackground.png');
          background-repeat: repeat-x;
          background-position: top left;
          color: #ffffff;
          font-size: 12px;
          text-align: center;
          padding-top: 1px;
          padding-bottom: 1px;
          margin-bottom: 1px;
          display: none;
        }
        
        .controlBarItemImage
        {
          width: 100%;
          height: 100%;
          border: 0px;
        }                

        .optionsTable
        {
          border:1px solid #aeaeae;
          background-color: #F7F3E7;
          margin-left:2px;
        }
        
        .optionsTable TD
        {
          border-right:1px solid #aeaeae;
          padding-left:2px;
          padding-right:2px;
          padding-top:0px;
          padding-bottom:0px;
        }
        
        .dataTable td, .dataTable th
        {
          border-left:1px solid #aeaeae;
          border-right:1px solid #aeaeae;
          border-top:1px solid #aeaeae;
          border-bottom:1px solid #aeaeae;
        }
        
        .dataTable input
        {
          border:0px solid #aeaeae;
        }
        
        .dataTable td
        {
          background-color: #F7F3E7;
        }
        .dataTable th
        {
          background-color: #C4CEE0;
        }
    </style>
    <script type"text/javascript">
    function showHelp()
    {
      window.open("./ChartHelp.html", "Help");
    }
    </script>
</head>

<body>
    <form action=""> 
    <table cellpadding="0" cellspacing="0" id="controlBar" class="controlBar"></table>   
    <div id="SilverlightControlHost" class="silverlightHost" >
      <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
			  <param name="source" value="ClientBin/AdvanceUsage.xap"/>
			  <param name="onerror" value="onSilverlightError" />
        <param name="windowless" value="true" />
			  <param name="background" value="transparent" />
			  <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
     			  <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
			  </a>
		  </object>
    </div>
      <div>
        <b><img alt="Show Advanced Options" id="disclose" src="./images/plus.png" onclick="showAdvancedOptions()"/> <a href="" onclick="showAdvancedOptions(); return false">Advanced Options</a> &nbsp;&nbsp;<a href="" onclick="showHelp(); return false">Chart Help</a>&nbsp;&nbsp;<a href="./FreeSilverlightChart.zip">Source</a></b>
      </div>
      <div id="chartAdvancedOptions" style="margin-left:10px;display:none">
      <b>FreeSilverlightChart Demo - Please choose a graph type and click "Load Chart" Button Below.</b>
        <div>
          <table class="optionsTable" cellspacing="0">
            <tr>
              <td>Graph
                <select id="graphType" style="WIDTH: 100px" size="1">
                  <option value="VBAR" selected>Vertical Bar</option>
                  <option value="HBAR">Horizontal Bar</option>
                  <option value="CYLINDERBAR">Cylinder Bar</option>
                  <option value="VBAR_STACKED">Stacked Vertical Bar</option>
                  <option value="HBAR_STACKED">Stacked Horizontal Bar</option>
                  <option value="PIE">Pie</option>
                  <option value="AREA">Area</option>
                  <option value="AREA_STACKED">Stacked Area</option>
                  <option value="LINE">Line</option>
                  <option value="BAR_LINE_COMBO">Bar Line Combo</option>
                  <option value="BAR_LINE_AREA_COMBO">Bar Line Area Combo</option>
                  <option value="BAR_AREA_COMBO">Bar Area Combo</option>
                  <option value="XYLINE">XY Line</option>
                  <option value="SCATTER_PLOT">Scatter Plot</option>
                  <option value="RADAR">Radar</option>
                  <option value="RADAR_AREA">Radar Area</option>
                  <option value="FUNNEL">Funnel</option>
                  <option value="CIRCULAR_GAUGE">Circular Guage</option>
                  <option value="SEMI_CIRCULAR_GAUGE">Semi Circular Guage</option>
                </select>
                </td>
                <td>
                Title <input id="chartTitle" style="WIDTH: 75px" value="Chart Title"/>&nbsp;&nbsp; 
                </td>
                <td>
                Sub-title <input id="chartSubTitle" style="WIDTH: 90px" value="Chart SubTitle"/>&nbsp;&nbsp; 
                </td>
                <td>
                Footer <input id="chartFootNote" style="WIDTH: 50px" value="Footnote"/>&nbsp;&nbsp; 
                </td>
                <td>
                YMajorCount<input id="yMajorCount" style="WIDTH: 30px" value="8" NAME="yMajorCount">&nbsp;&nbsp;
                </td>
                <td>
                YMinorCount<input id="yMinorCount" style="WIDTH: 30px" value="0" NAME="yMinorCount">&nbsp;&nbsp;
              </td>
            </tr>
            <tr>
              <td>
                Legend
                <select style="WIDTH: 92px" id="legend" size="1">
                  <option value="NONE">None</option>
                  <option value="TOP">Top</option>
                  <option value="END">End</option>
                  <option value="BOTTOM" selected>Bottom</option>
                  <option value="START">Start</option>
                </select>
               </td>
              <td>
                <label for="skin">Skin</label>
                <select id="skin" size="1" style="WIDTH: 80px">
                <option value="GradientLookAndFeel">GradientLookAndFeel</option>
                <option value="TransparentLookAndFeel">TransparentLookAndFeel</option>
                </select>&nbsp;&nbsp;
                </td>
                <td>
                <label for="format">Format string</label>
                <input id="format" style="WIDTH: 80px" value="$#,##0.00;($#,##0.00);0" name="Format"/>&nbsp;&nbsp;
                </td>
                <td>
                <label for="animDur">Anim(sec)</label>
                <input id="animDur" style="WIDTH: 30px" value="1.5" name="animDur"/>&nbsp;&nbsp;
                </td>
                <td>
                <input id="Perspective" type="checkbox" checked name="Perspective"/>&nbsp;&nbsp;
                <label for="Perspective">Perspective(2.5D)</label>&nbsp;&nbsp;
                </td>
                <td>
                <button type="button" id="loadChartButton">load Chart</button>
              </td>
            </tr>
          </table>
        </div>
        <div>
          <table class="dataTable">
            <tr>
              <th align="center">
                Y-Values <button type="button" title="Add YValues" style="width:14px" id="addYValue">+</button>
                <button type="button"title="Remove YValues" style="width:14px" id="removeYValue">-</button>
              </th>
              <th align="center">
                Group Labels <button type="button"title="Add Group Label" style="width:14px" id="addGroup">+</button>
                <button type="button" title="Remove Group Label" style="width:14px" id="removeGroup">-</button>
              </th>
              <th align="center">
                Series Labels <button type="button" title="Add Series Label" style="width:14px" id="addSeries">+</button>
                <button type="button" title="Remove Series Label" style="width:14px" id="removeSeries">-</button>
              </th>
              <th align="center">
                Series Colors <button type="button" title="Add Series Colors" style="width:14px" id="addSeriesColors">+</button>
              </th>
              <th align="center">
                Max/Min
              </th>
              <th align="center">
                X-Values(XY-Line/Scatter) <button  type="button" title="Add XValues" style="width:14px" id="addXValue">+</button>
                <button type="button" title="Remove XValues" style="width:14px" id="removeXValue">-</button>
              </th>
            </tr>
            <tr>
              <td vAlign="top" align="center">
                <div style="OVERFLOW: auto; HEIGHT: 150px">
                  <table class="dataTable" id="chartYValues" cellSpacing="0" cellPadding="0">
                  </table>
                </div>
              </td>
              <td vAlign="top" align="center">
                <div style="OVERFLOW: auto; HEIGHT: 150px">
                  <table class="dataTable" id="groupLabels" cellSpacing="0" cellPadding="0">
                  </table>
                </div>
              </td>
              <td vAlign="top" align="center">
                <div style="OVERFLOW: auto; HEIGHT: 150px">
                  <table class="dataTable" id="seriesLabels" cellSpacing="0" cellPadding="0">
                  </table>
                </div>
              </td>
              <td vAlign="top" align="center">
                <div style="OVERFLOW: auto; HEIGHT: 150px">
                  <table class="dataTable" id="seriesColors" cellSpacing="0" cellPadding="0">
                  </table>
                </div>
              </td>
              <td vAlign="top" align="center">
                <div style="OVERFLOW: auto; HEIGHT: 150px">
                  <table class="dataTable" cellSpacing="0" cellPadding="0">
                    <tr>
                      <td>MinValue Y
                      </td>
                      <td><input id="minValueY" style="WIDTH: 50px" value="0" name="minValueY">
                      </td>
                    </tr>
                    <tr>
                      <td>MaxValue Y
                      </td>
                      <td><input id="maxValueY" style="WIDTH: 50px" value="200000" name="maxValueY">
                      </td>
                    </tr>
                    <tr>
                      <td>MinValue X
                      </td>
                      <td>
                        <input style="WIDTH:50px" id="minValueX" value="6" NAME="minValueX">
                      </td>
                    </tr>
                    <tr>
                      <td>
                        MaxValue X
                      </td>
                      <td>
                        <input style="WIDTH:50px" id="maxValueX" value="10" NAME="maxValueX">
                      </td>
                    </tr>
                  </table>
                </div>
              </td>
              <td vAlign="top" align="center">
                <div style="OVERFLOW: auto; HEIGHT: 150px">
                  <table class="dataTable" id="chartXValues" cellSpacing="0" cellPadding="0">
                  </table>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <br/>
      </div>    
    </form>
</body>
</html>
